<template>
    <div class="apiSearchContainer">
        <span class="inputLabel">角色编码</span>
        <el-input v-model="roleSearchData.roleCode" placeholder="角色编码" class="searchInfoInput"></el-input>

        <span class="inputLabel">角色名称</span>
        <el-input v-model="roleSearchData.roleName" placeholder="角色名称" class="searchInfoInput"></el-input>

        <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryUserInfo()">搜索</el-button>
        <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
    </div>
</template>

<script>
import {roleInfoQuery} from "@/request/role";

export default {
    name: "RoleSearch",
    data() {
        return {
            searchLoading: false
        }
    },
    computed: {
        roleSearchData() {
            return this.$store.state.roleSearchData;
        }
    },
    methods: {
        queryUserInfo() {
            this.searchLoading = true
            roleInfoQuery(this.roleSearchData).then(res => {
                if (res.code === '200') {
                    this.$store.commit('changeRoleDataList', res.data)
                }
                this.searchLoading = false
            }).catch(res => {
                this.searchLoading = false
            })
        },
        resetInput() {
            let info = {
                roleCode: '',
                roleName: ''
            }
            this.$store.commit('changeRoleSearchData', info)
        }
    }
}
</script>

<style scoped lang="less">
.apiSearchContainer {
    width: 100%;
    height: 10%;
    .searchInfoInput {
        width: 15%;
        padding-left: 1%;
    }
    .inputLabel {
        padding-left: 1%;
        font-weight: 700;
        font-size: 15px;
        color: #606266;
    }
    .searchButtonClass {
        margin-left: 1%;
    }
}
</style>